<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw="
    crossorigin="anonymous">
  <!-- Optional theme -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha256-o8bM0Z5cFvrvvvQp0EJFi4LICvBA9FCx7iCNuojVsN8="
    crossorigin="anonymous"> -->
  <!-- font-awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- font Raleway e Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500i,600,600i,700,700i,800,900|Source+Sans+Pro:300,300i,400,400i,600i,700,900"
    rel="stylesheet">

  <!-- slider - https://bxslider.com -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

  <!-- animate.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

  <!-- favicon -->
  <link rel="icon" type="image/png" href="https://i.postimg.cc/5yDFZk0v/favicon.png" />

  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="css/responsive.css">

  <title>Loso - Simple, Clean And Responsive Website</title>
</head>

<body>

  <!-- Header section -->
  <header class="header" id="home">

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#loso-navbar-collapse-1"
            aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="https://i.postimg.cc/JzNB2xWD/logo-small.png" alt="logo small">
          </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="loso-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#home" class="nav-item">Home</a></li>
            <li><a href="#about" class="nav-item">About</a></li>
            <li><a href="#feature" class="nav-item">Features</a></li>
            <li><a href="#screens" class="nav-item">Screens</a></li>
            <li><a href="#download" class="nav-item">Download</a></li>
            <li><a href="#contact" class="nav-item">Contact</a></li>
          </ul>

        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="header-overlay header-container">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="logo text-center">
              <img src="https://i.postimg.cc/VLbtj1GF/logo.png" alt="Logo">
            </div>
          </div>
        </div>

        <div class="row">

          <div class="col-md-8">
            <div class="header-text">
              <h1>A clean and modern looking reponsive website</h1>
              <p>Built with great love!</p>
            </div>
            <div class="header-btns">
              <a href="#" class="btn btn-download wow fadeInLeft">Download</a>
              <a href="#" class="btn btn-tour wow fadeInRight">Take A Tour
                <i class="fa fa-angle-down"></i>
              </a>

            </div>
          </div>

          <div class="col-md-3 col-md-offset-1">
            <div class="header-iphone">
              <img src="https://i.postimg.cc/266b3fLh/iphone-header.png" alt="Header Iphone">
            </div>
          </div>

        </div>

      </div>
    </div>
  </header>
  <!-- end of Header section -->

  <!-- About section -->
  <section id="about">
    <div class="container">
      <div class="row">
        <div class="col-md-10 col-offset-1">

          <div class="section-title">
            <h2>About Us</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, voluptatem consectetur voluptatum aperiam
              maxime ex numquam excepturi impedit iusto deserunt eius ad voluptas corporis eum minima voluptates,
              quisquam aliquid consequatur?</p>
          </div>

        </div>
      </div>
    </div>

    <div class="choose-us-wrapper">
      <div class="container">
        <div class="row">

          <div class="col-md-6">
            <div class="about-iphone wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s">
              <img class="img-responsive" src="https://i.postimg.cc/3NkvfHKY/about-iphone.png" alt="iphone">
            </div>
          </div>

          <div class="col-md-6 wow fadeInRight" data-wow-duration="1s" data-wow-delay=".5s">
            <div class="choose-us-title">
              <h2>Why Choose Us?</h2>
              <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque lacus
                dui, interdum sit amet varius.</p>
            </div>

            <div class="choose-us-des">

              <div class="choose-us-item wow fadeInUp" data-wow-duration=".5s" data-wow-delay="1.0s">
                <div><i class="fa fa-bolt"></i></div>
                <h3>QUISQUE LACUS DUI</h3>
                <p>Lipsum Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque
                  lacus dui, interdum sit amet varius a, cursus sit amet sapien. Donec eu placerat nisi.</p>
              </div>

              <div class="choose-us-item wow fadeInUp" data-wow-duration=".5s" data-wow-delay="1.5s">
                <div><i class="fa fa-bullhorn"></i></div>
                <h3>DONEC EU PLACERAT NISI</h3>
                <p>Diso Lipsum Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                  Quisque lacus dui, interdum sit amet varius a, cursus sit amet sapien. Donec eu placerat nisi.</p>
              </div>

              <div class="choose-us-item wow fadeInUp" data-wow-duration=".5s" data-wow-delay="2.0s">
                <div><i class="fa fa-flag-o"></i></div>
                <h3>PERSPICIATIS UNDE OMNIS</h3>
                <p>Sed ut perspiciatis Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                  laborum.unde omnis iste natus error sit.</p>
              </div>

            </div>


          </div>



        </div>
      </div>
    </div>
  </section>
  <!-- end of About section -->

  <!--Testimonial section -->
  <section class="testimonial">
    <div class="testimonial-overlay">
      <div class="container">
        <div class="row">
          <div class="col-md-12 wow bounceInDown">

            <div id="carousel-testimonial" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-testimonial" data-slide-to="1"></li>
                <li data-target="#carousel-testimonial" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active text-center">
                  <img src="https://i.postimg.cc/RFVffHy3/client-01.jpg" alt="testimonial" class="center-block">
                  <div class="testimonial-caption">
                    <h2>Daniel</h2>
                    <h4><span> Sr. Software Engineer,</span> Blue Gyms</h4>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                      nisi ut aliquip."</p>

                  </div>
                </div>

                <div class="item text-center">
                  <img src="https://i.postimg.cc/hG0TfryW/client-02.jpg" alt="testimonial" class="center-block">
                  <div class="testimonial-caption">
                    <h2>Rauls Pole</h2>
                    <h4><span> Marketting Manager,</span> Risko</h4>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                      nisi ut aliquip."</p>

                  </div>
                </div>

                <div class="item text-center">
                  <img src="https://i.postimg.cc/63jZhQxM/client-03.jpg" alt="testimonial" class="center-block">
                  <div class="testimonial-caption">
                    <h2>Jim So</h2>
                    <h4><span> Assistan Manager,</span> Gidfo</h4>
                    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                      nisi ut aliquip."</p>

                  </div>
                </div>

                ...
              </div>

              <!-- Controls
              <a class="left carousel-control" href="#carousel-testimonial" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-testimonial" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div> -->

            </div>
          </div>
        </div>
      </div>
  </section>
  <!-- end Testimonial section -->

  <!-- Features -->
  <section class="features" id="feature">

    <div class="container">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="section-title wow fadeIn" data-wow-duration="1s">
            <h2>Features</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="features-inner-wrapper">
      <div class="container">
        <div class="row">

          <div class="col-md-4 wow fadeInLeft" data-wow-duration="1s">

            <div class="left-feature-item">
              <div class="left-feature-item-icon">
                <i class="fa fa-desktop"></i>
              </div>

              <h3>RETINA READY</h3>
              <p>Lorem ipsum dolor, consectetur sed do adipisicing elit, sed do eiusmod tempor incididunt</p>

            </div>

            <div class="left-feature-item">
              <div class="left-feature-item-icon">
                <i class="fa fa-mobile"></i>
              </div>

              <h3>MOBILE READY</h3>
              <p>Lorem ipsum dolor, consectetur sed do adipisicing elit, sed do eiusmod tempor incididunt</p>

            </div>

            <div class="left-feature-item">
              <div class="left-feature-item-icon">
                <i class="fa fa-eye"></i>
              </div>

              <h3>EASY LAYOUT</h3>
              <p>Lorem ipsum dolor, consectetur sed do adipisicing elit, sed do eiusmod tempor incididunt</p>

            </div>

          </div>

          <div class="col-md-4">
            <div class="feature-iphone">
              <img src="https://i.postimg.cc/BZzDLtg6/iphone-02.png" alt="feature iphone" class="wow bounceIn img-responsive"
                data-wow-duration="1s">
            </div>
          </div>

          <div class="col-md-4 wow fadeInRight" data-wow-duration="1s">

            <div class="right-feature-item">
              <div class="right-feature-item-icon">
                <i class="fa fa-certificate"></i>
              </div>

              <h3>CERTIFIED SOLUTION</h3>
              <p>Lorem ipsum dolor, consectetur sed do adipisicing elit, sed do eiusmod tempor incididunt</p>

            </div>

            <div class="right-feature-item">
              <div class="right-feature-item-icon">
                <i class="fa fa-rss"></i>
              </div>

              <h3>CONSTANT FEED</h3>
              <p>Lorem ipsum dolor, consectetur sed do adipisicing elit, sed do eiusmod tempor incididunt</p>

            </div>

            <div class="right-feature-item">
              <div class="right-feature-item-icon">
                <i class="fa fa-database"></i>
              </div>

              <h3>SECURE DATA</h3>
              <p>Lorem ipsum dolor, consectetur sed do adipisicing elit, sed do eiusmod tempor incididunt</p>

            </div>

          </div>

        </div>
      </div>
    </div>


  </section>
  <!-- end Features -->

  <!-- Purchase Now -->
  <section class="purchase-now">
    <div class="container">
      <div class="row wow fadeInLeftBig" data-wow-duration="1s">

        <div class="col-md-9">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
        </div>

        <div class="col-md-3">

          <a href="#" class="btn btn-primary btn-purchase-now" role="button">Purchase Now</a>

        </div>


      </div>
    </div>
  </section>
  <!-- end Purchase Now -->

  <!--  Building Screens-->
  <section class="screens" id="screens">
    <div class="container">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="section-title">
            <h2>Screens</h2>
            <p>Mauris a mauris feugiat, luctus mauris a, sollicitudin ex. Pellentesque et tortor in risus elementum
              aliquet. Etiam facilisis justo urna, id feugiat magna scelerisque non.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="screen-slider wow bounceInRight" data-wow-duration="1s">

      <div class="container">
        <div class="row">

          <div class="col-md-10 col-md-offset-1">

            <div class="bx-slider">
              <div class="item">
                <img src="https://i.postimg.cc/bY4gXm43/screen-01.png" alt="screen">
              </div>

              <div class="item">
                <img src="https://i.postimg.cc/HWrzPqvr/screen-02.png" alt="screen">
              </div>

              <div class="item">
                <img src="https://i.postimg.cc/14xfWnCr/screen-03.png" alt="screen">
              </div>

              <div class="item">
                <img src="https://i.postimg.cc/Vv0JBBRN/screen-04.png" alt="screen">
              </div>
            </div>

          </div>


        </div>
      </div>

    </div>
  </section>
  <!-- end Building Screens -->

  <!-- Building Counter -->
  <section class="counter">
    <div class="counter-overlay">
      <div class="container wow bounceInLeft" data-wow-duration="1s">
        <div class="row text-center">

          <div class="col-md-3">
            <div class="counter-item">
              <div><i class="fa fa-cloud-download"></i></div>
              <h2><span class="counter-num"> 1588 </span><span>+</span></h2>
              <p>Downloads</p>
            </div>
          </div>

          <div class="col-md-3">
            <div class="counter-item">
              <div><i class="fa fa-gift"></i></div>
              <h2><span class="counter-num"> 3500 </span><span>+</span></h2>
              <p>Awards</p>
            </div>
          </div>

          <div class="col-md-3">
            <div class="counter-item">
              <div><i class="fa fa-heart-o"></i></div>
              <h2><span class="counter-num"> 199 </span><span>+</span></h2>
              <p>Likes</p>
            </div>
          </div>

          <div class="col-md-3">
            <div class="counter-item">
              <div><i class="fa fa-check"></i></div>
              <h2><span class="counter-num"> 1066 </span><span>+</span></h2>
              <p>Recomended</p>
            </div>
          </div>


        </div>
      </div>
    </div>
  </section>
  <!-- End Building Counter -->

  <!-- Download Now -->
  <section class="download-now" id="download">
    <div class="container">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="section-title">
            <h2>Download Now</h2>
            <p>Vestibulum congue eros ac neque dignissim, vel imperdiet neque consectetur. Maecenas condimentum cursus
              maximus. Praesent eu diam efficitur</p>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2 wow fadeInUp" data-wow-duration="1s">
          <img src="https://i.postimg.cc/JzVkxgSC/download-screen.png" alt="download screen img-responsive">
        </div>
      </div>
    </div>
  </section>
  <!-- End Download Now -->

  <!-- Available On -->
  <section class="available-on">
    <div class="container wow bounceInRight" data-wow-duration="1s">
      <div class="row">
        <div class="col-md-6">
          <div class="available-title">
            <h2>Available On</h2>
            <p>Curabitur vitae dolor fermentum, egestas nulla eu, varius lacus.</p>
          </div>
        </div>

        <div class="col-md-6">
          <div class="row">

            <a href="#">
              <div class="col-md-4 no-padding">
                <div class="available-on-item">
                  <i class="fa fa-apple"></i>
                  <div class="available-on-inner">
                    <h2> iOS</h2>
                  </div>
                </div>
              </div>
            </a>

            <a href="#">
              <div class="col-md-4 no-padding">
                <div class="available-on-item">
                  <i class="fa fa-android"></i>
                  <div class="available-on-inner">
                    <h2> ANDROID</h2>
                  </div>
                </div>
              </div>
            </a>

            <a href="#">
              <div class="col-md-4 no-padding">
                <div class="available-on-item">
                  <i class="fa fa-windows"></i>
                  <div class="available-on-inner">
                    <h2> WINDOWS</h2>
                  </div>
                </div>
              </div>
            </a>

          </div>
        </div>


      </div>
    </div>
  </section>
  <!-- End Available On -->

  <!-- Building Contact Us  -->
  <section class="contact-us" id="contact">
    <div class="container wow bounceIn">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="section-title">
            <h2>Contact Us</h2>
            <p>Nulla blandit sem sed neque pretium mattis. Etiam consectetur eleifend felis porttitor porttitor.
              Phasellus sit amet augue fringilla, fringilla lectus at, tincidunt ante</p>
          </div>
        </div>
      </div>
    </div>

    <div class="contact-us-form wow bounceIn">
      <div class="container">
        <form role="form">
          <div class="row">
            <div class="col-md-4">
              <input type="text" class="form-control" id="name" placeholder="Name">
              <input type="email" class="form-control" id="email" placeholder="Email">
              <input type="text" class="form-control" id="subject" placeholder="Subject">
            </div>

            <div class="col-md-8">
              <textarea id="message" cols="10" rows="25" class="form-control" placeholder="Message text..."></textarea>
              <button class="btn btn-default submit-btn form-submit">SEND</button>
            </div>


          </div>

        </form>
      </div>
    </div>


    <div class="container">
      <div class="row">
        <div class="col-md-12 wow bounceInLeft">
          <div class="social-icons">
            <ul>
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </section>
  <!-- End Building Contact Us -->

  <!-- Building Footer -->
  <footer class="footer">
    <div class="container">
      <div class="row">

        <div class="col-md-6">
          <div id="copyright">
            <p>Copyright &copy; 2018 - <a href="#">Loso</a></p>
          </div>
        </div>

        <div class="col-md-6">
          <div class="scroll-top">
            <a href="#home" id="scroll-to-top"><i class="fa fa-angle-up"></i></a>
          </div>
        </div>

      </div>
    </div>
  </footer>
  <!-- End Building Footer -->

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo="
    crossorigin="anonymous"></script>

  <!-- slider - https://bxslider.com -->
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

  <!-- Counter-Up jQuery Plugin -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js" integrity="sha256-JtQPj/3xub8oapVMaIijPNoM0DHoAtgh/gwFYuN5rik="
    crossorigin="anonymous"></script>

  <!-- wow - animate -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>


  <script src="js/custom.js"></script>

</body>

</html>